<!-- Copyright (c) 2012 Mobile Developer Solutions -->
<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
    <title>MDS PhoneGap API Demo with jQuery Mobile</title>
	<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
	<script type="text/javascript" charset="utf-8" src="index.js"></script>
 	<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
	<link rel="stylesheet" href="index.css" /> 
    <script src="jquery.mobile/jquery-1.7.2.min"></script>
	<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
     <script type="text/javascript" src="apis/cdv-plugin-fb-connect.js"></script>
    <script type="text/javascript" src="facebook_js_sdk.js"></script>
  
	<!-- CDN Respositories: For production, replace lines above with these uncommented minified versions -->
	<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />-->
	<!-- <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>-->
	<!-- <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>-->
	</head>
  
  <body>
	<!-- Facebook JavaScript -->
	<div id="fb-root"></div>


	<!-- Login page -->
	<div data-role="page" id="login" class="type-home">
		<div data-role="content">
			<div id="login-header">
				<img src="images/scrumptious_logo.png" alt="Scrumptious" /><span class="tagline">Scrumptious</span>
			</div>
			<div id="login-intro">
				<p class="intro">To get started, login using Facebook</p></div>
			</div>
			<div class="login">
                <a onclick="promptLogin()" > 
                  <span>Login</span>
                </a>
            </div>
		</div>
	</div>
	<!-- Main menu page -->
	<div data-role="page" id="menu" class="type-menu">
		<div data-role="header">
      <div class="ui-bar ui-bar-a">

        <span class="topnav-app">Scrumptious</span>

        <span id="user-identity"></span>
        <!-- menu trigger -->
        <a data-icon="arrow-d" data-iconpos="notext" href="#menu" data-rel="popup" data-position-to="#menu-anchor" data-transition="slidedown" data-inline="true" class="ui-btn-right">Menu</a>
      </div>
		</div><!-- /header -->

		<div data-role="content">
      <!-- menu position helper -->
      <div id="menu-anchor"></div>
    <!-- menu content -->
    <div id="menu" data-role="popup">
      <ul data-role="listview" data-inset="true">
        <li data-icon="false"><a id="logout" href="#login">Log Out</a></li>
      </ul>
    </div>

      <div id="confirmation"></div>
			
    
  </body>
</html>
